<!--
 * @Autor: Charlie/彭旺
 * @email: 413157399@qq.com
 * @Date: 2022-06-21 21:37:43
-->
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-button type="primary" icon="el-icon-plus" @click="adads">上传视屏</el-button>
    </div>
    <!--表格渲染-->
    <el-table ref="table" :data="crud.data" style="width: 100%;">
      <el-table-column v-if="columns.visible('engine')" :show-overflow-tooltip="true" prop="engine" label="标题" />
      <el-table-column v-if="columns.visible('coding')" :show-overflow-tooltip="true" prop="coding" label="简介" />
      <el-table-column v-if="columns.visible('remark')" :show-overflow-tooltip="true" prop="remark" label="点赞数" />
      <el-table-column prop="remark" label="状态">
        <template slot-scope="scope">
          <el-button type="primary" size="mini">待审核</el-button>
          <el-button type="primary" size="mini">审核通过</el-button>
          <el-button type="danger" size="mini">审核不通过</el-button>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('remark')" :show-overflow-tooltip="true" prop="remark" label="关联商家" />
      <el-table-column v-if="columns.visible('remark')" :show-overflow-tooltip="true" prop="remark" label="关联商品" />
      <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="open">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import { generator, sync } from '@/api/generator/generator'
import { downloadFile } from '@/utils/index'
import CRUD, { presenter, header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import { Tablelist } from "@/api/table";
// crud交由presenter持有
const defaultCrud = CRUD({ url: 'api/generator/tables' })
export default {
  name: 'GeneratorIndex',
  components: { pagination, crudOperation, rrOperation },
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      syncLoading: false
    }
  },
  created() {
    this.crud.optShow = { add: false, edit: false, del: false, download: false }
    Tablelist({
      page: 1,
      pageSize: 10,
    }).then((res) => {
      console.log("", res);
    })
  },
  methods: {
    adads() {
      this.$router.push('/short-video/upload')
    },
    open() {
      const h = this.$createElement
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 300)
            }, 3000)
          } else {
            done()
          }
        }
      }).then((action) => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        })
      })
    }
    // toGen(tableName) {
    //   // 生成代码
    //   generator(tableName, 0).then(data => {
    //     this.$notify({
    //       title: '生成成功',
    //       type: 'success',
    //       duration: 2500
    //     })
    //   })
    // },
    // toDownload(tableName) {
    //   // 打包下载
    //   generator(tableName, 2).then(data => {
    //     downloadFile(data, tableName, 'zip')
    //   })
    // },
    // sync() {
    //   const tables = []
    //   this.crud.selections.forEach(val => {
    //     tables.push(val.tableName)
    //   })
    //   this.syncLoading = true
    //   sync(tables).then(() => {
    //     this.crud.refresh()
    //     this.crud.notify('同步成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
    //     this.syncLoading = false
    //   }).then(() => {
    //     this.syncLoading = false
    //   })
    // }
  }
}
</script>

<style scoped>
</style>